<template>
	<view>
		<view class="bg w-p-100 h-160"></view>
		<view class="position-relative  px-30 w-p-100 box-sizing" style="top:-200rpx;">
			<view class="bg-white round-8 text-center p-20 flex-y-center   flex flex-column grid-gap-12">
				<image :src="WEBCONFIG?.web_logo" class="w-60 h-60 round-8 position-absolute top--30"
					style="left: 50%;transform: translate(-50%);"></image>
				<text class="fs-12 mt-30">{{WEBCONFIG?.web_name}}</text>
				<image class="mt-10 w-180 h-180" show-menu-by-longpress :src="code"></image>
				<view class="flex flex-column" v-if='path'>
					<text>推广链接</text>
					<text class="fs-14 text-ellipsis-1"> {{path}}</text>
				</view>
				<view class="flex w-p-100 flex-x-space-between mt-10">
					<view class="px-16 py-8 round-30 blue fs-12 text-white" @click="save()">保存二维码</view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="btn-normal" open-type="share">
						<view class="px-16 py-8 round-30 green fs-12 text-white" @click="share">立即分享</view>
					</button>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="px-16 py-8 round-30 green fs-12 text-white" @click="$tool.copy(path)">复制链接</view>
					<!-- #endif -->
				</view>
			</view>

			<view class="py-16">
				<view class="bg-white p-15 round-8 flex flex-column grid-gap-12">
					<text class="fs-17 fw-600 ">分销说明</text>
					<mp-html :content='dealer?.content'></mp-html>
				</view>
			</view>
		</view>


	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	import { onLoad, onShareAppMessage } from '@dcloudio/uni-app'
	import { $page, $http, $tool } from '@/utils/index'
	const { WEBCONFIG } = useRefs(useWebConfigStore());
	const { USERINFO } = useRefs(useUserStore());
	const code = ref('')
	const path = ref('')
	const dealer = ref()
	onLoad(() => {
		getQrcode()
		getTags()
	})
	const getQrcode = () => {
		let source = 'weixin'
		// #ifdef H5
		source = 'h5'
		// #endif
		$http.get('Share/getCode', { source: source }).then(res => {
			code.value = res.data.code
			path.value = res.data.path
		})
	}

	const getTags = () => {
		$http.get('Tags/getDetail', { name: 'dealer' }).then(res => {
			dealer.value = res.data
		})
	}

	const save = () => {
		uni.showLoading({
			title: '保存中...'
		})
		// #ifdef MP-WEIXIN
		uni.getImageInfo({
			src: code.value,
			success(res) {
				uni.saveImageToPhotosAlbum({
					filePath: res.path,
					success(e) {
						$tool.toast('保存成功')
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			fail(e) {
				console.log(e)
			}
		})
		// #endif

		uni.hideLoading()
	}


	onShareAppMessage(() => {
		let id = USERINFO.value.id || 0
		return {
			title: WEBCONFIG.value?.share_title || WEBCONFIG.value?.web_name || '',
			path: 'pages/index/index?id=' + id,
			imageUrl: WEBCONFIG.value?.share_image || ''
		}
	})
</script>

<style scoped>
	.bg {
		background: linear-gradient(180deg, #529ef9, #3276f5);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.blue {
		background-color: #3276f5;
	}

	.green {
		background-color: #4aca60;
	}
</style>